<template>
  <h-modal cancel-text="取消" ok-text="确定" :height="600"
         :visible="visible" :width="1000" @ok="handleOK" @cancel="close" title="详情">
    <div class="h-flow-variable-selector">
      <Section title="基本信息">
        <FlowHistoryBasic :userTask="userTask"></FlowHistoryBasic>
      </Section>
      <Section v-if="current && current.length" title="待办">
        <FlowUserTaskNodeHistory :request="request" :dataSource="current"/>
      </Section>
      <Section v-if="history && history.length" title="已办">
        <FlowUserTaskNodeHistory :request="request" :dataSource="history"/>
      </Section>
    </div>
  </h-modal>
</template>

<script>
import {Modal} from "ant-design-vue";
import Section from '@/components/Section/Section.vue';
import RowAttribute from '@/components/flow/layout/RowAttribute.vue';
import {createProps, isEmpty} from '@/utils/index.js';
import FlowHistoryBasic from './components/FlowHistoryBasic';
import FlowUserTaskNodeHistory from '@/components/flow/nodeHistoryDetail/components/FlowUserTaskNodeHistory.vue';
import HModal from '@/components/HModal/HModal.vue';

export default {
  name: "FlowUserTaskHistory",
  components: {
    HModal,
    FlowUserTaskNodeHistory,
    Modal,
    Section,
    RowAttribute,
    FlowHistoryBasic
  },
  props: {
    processInstanceId: createProps(String),
    userTask: createProps(Object),
    taskId: createProps(String),
    service: createProps(Function),
  },
  data() {
    return {
      visible: false,
      labelWidth: '130px',
      nodeData: {},
      flowCommentHistory: [],
      current: [],
      history: []
    };
  },
  methods: {
    open() {
      this.visible = true;
    },
    close() {
      this.visible = false;
      this.$emit('close');
    },
    handleOK() {
      this.close();
    },
    loadData() {
      if (isEmpty(this.taskId) || isEmpty(this.processInstanceId) || !this.service) return;
      this.service.get('/flow/getUserTaskHistory', {
        params: {processInstanceId: this.processInstanceId, taskDefinitionId: this.taskId}
      }).then(data => {
        this.current = data.current;
        this.history = data.history;
      });
    },
  },
  computed: {
    request() {
      return {
        baseURL: this.service.baseURL,
        headers: this.service.headers
      };
    },
  },
  watch: {
    taskId: {
      handler() {
        this.loadData();
      },
      immediate: true
    },
    processInstanceId: {
      handler() {
        this.loadData();
      },
      immediate: true
    }
  }
};
</script>

<style scoped>
.h-flow-variable-selector::-webkit-scrollbar {
  width: 0;
}

.h-flow-variable-selector {
  width: auto;
  overflow: auto;
}
</style>
